<template>
  <div class="home">
    <Row type="flex" justify="center" align="top" class="homeavater" ref="homeavater">
      <Col :xs="24" :sm="24" :md="8" :lg="8" class="enter ">
        <Button @click="value2 = true" type="primary" class="asidebtn"
          ><Icon type="ios-list"
        /></Button>
        <Drawer
          title="JinXin"
          :closable="false"
          v-model="value2"
          class="togbtn"
        >
          <p @click="$store.state.counter = 0">个人简介</p>
          <p @click="$store.state.counter = 1">职业技能</p>
          <p @click="$store.state.counter = 2">项目经历</p>
          <p @click="$store.state.counter = 3">联系方式</p>
        </Drawer>
        <div class="ani">
          <div class="images">
            <img src="../assets/front-image.jpg" alt="" />
          </div>
          <h1>Jin <span class="invert">Xin</span></h1>
          <h3 align="middle">
            Web <span class="ident">{{ identity }}</span>
          </h3>
          <input
            v-model="pwd"
            type="password"
            @keyup.13="enters"
            placeholder="请输入密匙"
            class="pwd-enter"
          />
          <div class="icon">
            <img src="../assets/profile-thum.png" alt="" />
          </div>
        </div>
      </Col>
    </Row>
    <router-view></router-view>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
      identity: "Developer",
      pwd: "",
      value2: false,
    };
  },
  methods: {
    enters() {
      if (this.pwd === "123456") {
        document
          .getElementsByClassName("icon")[0]
          .classList.add("scale-down-center");
        document.getElementsByClassName("enter")[0].classList.add("active");
         document.getElementsByClassName("homeavater")[0].classList.add("wen-enter");

        let u = navigator.userAgent;
        if (
          u.indexOf("Android") > -1 || //android终端
          u.indexOf("iPhone") > -1 || //是否为iPhone
          u.indexOf("iPad") > -1
        ) {
          this.$router.push({
            path: "about",
          });
        } else {
          this.$router.push({
            path: "web",
          });
        }
      }
    },
  },
  mounted() {
    setInterval(() => {
      if (this.identity === "Developer") {
        this.identity = "Designer";
      } else {
        this.identity = "Developer";
      }
    }, 2000);
  },
};
</script>

<style scoped>


.images {
  width: 19.6875rem;
  height: 11.0625rem;
  overflow: hidden;
  margin: 0 auto;
}
.enter {
  width: 21.5625rem;
  background: #111111;
  border-radius: 0.3125rem;
  margin: 0 auto;
  padding: 0.9375rem;
  margin-top: 12.03125rem;
}
@media screen and (min-width: 480px) {
  .home{
    width: 860px;
    margin: 0 auto;
    position: relative;
  }
  .wen-enter{
    justify-content: flex-start;
  }
  .wen-enter .enter{
    width: 33.3333333%;
    margin: 0;
  }
  .wen-enter h1{
    font-size: 45px;
  }
  .wen-enter h3{
    font-size: 23px;
  }
  .wen-enter .icon{
    width: 140px !important;
    height: 140px !important;
    border: 7px solid #f4d03f !important;
  }
}
.enter.active {
  transition: all 0.6s;
  margin-top: 0.9375rem;
}

.invert {
  color: #fff;
}
h1 {
  color: #f4d03f;
  font-size: 2.8125rem;
  text-align: center;
}
h3 {
  color: #fff;
  font-size: 1.5rem;
}
.ident {
  transform: rotateX(-180deg);
}
.pwd-enter {
  width: 12.5rem;
  padding: 6px;
  margin: 0 auto;
  display: block;
  color: #221111f5;
  border-radius: 5px;
  margin-top: 10px;
}

.enter.active .images,
.enter.active .pwd-enter {
  height: 0;
  display: none;
  transition: all 0.6s;
}
.enter .icon {
  display: none;
  width: 8.75rem;
  height: 8.75rem;
  border-radius: 50%;
  overflow: hidden;
  border: 0.4375rem solid #f4d03f;
  margin: 0.3125rem auto;
}
.enter.active .icon {
  display: block;
}
.asidebtn {
  font-size: 25px;
  padding: 0;
  background-color: #111111;
  border: none;
}
.togbtn p {
  height: 2.5rem;
  width: 100%;
  text-align: center;
  line-height: 2.5rem;
  background-color: #111111;
  margin: 1.25rem 0;
  color: #fff;
}

.scale-down-center {
  -webkit-animation: scale-down-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: scale-down-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes scale-down-center {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
</style>
